<template>
	<view class="bt">
		<view class="plr-36 ptb-20 bb">
			<view class="img-shop size-26 flex1 flex-middle">
				<image src="../../static/shop-icon.png" mode=""></image>
				<text class="ml-10">{{info.merchant_name}}</text>
			</view>
			<view class="bold mt-15">
				{{info.name}}
			</view>
			<view class="flex mt-15">
				<view class="size-26 red">
					￥<text class="size-36">{{info.set_meal_price}}</text>
				</view>
				<u-number-box v-model="num" :min="1" @change="valChange"></u-number-box>
			</view>
		</view>
		<view class="plr-36 ptb-20">
			<view class="flex">
				<view class="">
					使用截止日期
				</view>
				<view class="gray-1">
					{{info.end_time}}
				</view>
			</view>
			<view class="img-tisp flex1 flex-middle mt-10">
				<image src="../../static/icon-tisp.png" mode=""></image>
				<view class="size-26 ml-10">
					购买须知
					<text class="yellow ml-10">随时退</text>
					<text class="yellow ml-10">过期退</text>
				</view>
			</view>
		</view>
		<view class="w100" style="height: 20rpx;background: #f8f8f8;"></view>
		<view class="ptb-20">
			<view class="plr-36 size-34 bold">
				联系信息
			</view>
			<u-field v-if="info.type==1" v-model="name" label="姓名:" placeholder="必填"></u-field>
			<u-field v-if="info.type==1" v-model="tel" label="联系电话:" placeholder="必填"></u-field>
			<!-- <u-field v-if="info.type==2" v-model="address" label="服务地址:" :disabled="true" placeholder="点击选择地址">
				<view slot="right" class="">
					<u-icon name="arrow-right" color="#999"></u-icon>
				</view>
			</u-field> -->
			<view class="flex pd-30 bb"  v-if="info.type==2" @click="goAddress">
				<view class="flex_l">
					<view>服务地址：</view>
					<view class="u-flex-1" v-if="address.name">
						<view class="yellow">{{address.name}}  {{address.phone}}</view>
						<view class="size-26 mt-10">{{address.site}}{{address.doorplate}}</view>
					</view>
					<view v-else>点击选择地址</view>
				</view>
				<u-icon name="arrow-right" color="#999"></u-icon>
			</view>
			<u-field v-model="mark" label="备注信息:" placeholder="选填"></u-field>
		</view>
		<view class="w100" style="height: 20rpx;background: #f8f8f8;"></view>
		<view class="ptb-20">
			<view class="plr-36 size-34 bold">
				优惠券
			</view>
			<u-cell-item title="优惠券优惠" v-show="!coupon_id" :value="`有${userInfo.coupon_count}张优惠券可用`" @click="toCoupon"></u-cell-item>
			<u-cell-item title="优惠券优惠" v-show="coupon_id" :value="`-${coupon_price}`" @click="toCoupon"></u-cell-item>
			<view class="plr-36 mt-20">
				<u-radio-group v-model="value" @change="radioGroupChange" active-color="#FF9900" size="28">
					<u-radio name="1">
						点击提交订单表示您已阅读了解<text class="yellow" @click="rule">退改规则</text>
					</u-radio>
				</u-radio-group>
			</view>
		</view>
		<view class="fixed-bottom plr-36 bg-white flex" style="box-shadow: 0px -2px 6px rgba(238, 238, 238, 0.68);">
			<view class="red">
				<text class="size-26">￥</text>
				<text class="size-36">{{price}}</text>
			</view>
			<view class="bold bg-yellow ptb-9 plr-20 radius-10 white" @click="goPay">
				立即购买
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				goods_id: '',
				info: {},
				num: 1,
				name: '',
				tel: '',
				address_id: '',
				address:{},
				mark: '',
				coupon_id:'',
				coupon_price:0,
				value: 1
			};
		},
		computed: {
			...mapState(["userInfo"]),
			price() {
				return this.num * this.info.set_meal_price - this.coupon_price*1
			}
		},
		onLoad(option) {
			uni.$on('coupon',(item)=>{
				this.coupon_id = item.id
				this.coupon_price = item.coupon_price
			})
			this.goods_id = option.goods_id
			if(option.address_id){
				this.address_id = option.address_id
			}
			this.init()
		},
		onUnload() {
			uni.$off('coupon')
		},
		onShow() {
			this.$http('/api/address/info', {
				id:this.address_id
			}).then(data => {
				this.address = data
				this.address_id = data.id
			})
		},
		methods: {
			init() {
				this.$http('/api/shop/productInfo', {
					product_id: this.goods_id
				}).then(data => {
					this.info = data
				})
			},
			valChange(){
				this.coupon_id = ''
				this.coupon_price = 0
			},
			toCoupon() {
				uni.navigateTo({
					url: '/pages/home/coupon?goods_id='+this.goods_id+'&num='+this.num
				})
			},
			goAddress() {
				uni.navigateTo({
					url:'/pages/my/address/list?goods_id=' + this.goods_id
				})
			},
			radioGroupChange(e) {
				console.log(e);
			},
			goPay() {
				if (this.info.type == 1) {
					if (!this.name) {
						uni.showToast({
							title: '请填写姓名',
							icon: 'none'
						})
					} else if (!this.tel) {
						uni.showToast({
							title: '请填写联系电话',
							icon: 'none'
						})
					} else {
						this.subApi()
					}
				} else {
					if (!this.address_id) {
						uni.showToast({
							title: '请选择服务地址',
							icon: 'none'
						})
					} else {
						this.subApi()
					}
				}
			},
			subApi() {
				this.$http('/api/order/add', {
					product_id: this.goods_id,
					buy_count:this.num,
					type:this.info.type,
					user_name:this.name,
					user_phone:this.tel,
					address_id:this.address_id,
					user_coupon_id:this.coupon_id,
					remark:this.mark
				},"POST").then(data => {
					if(this.coupon_id){
						this.$store.dispatch('updateUserInfo')
					}
					uni.redirectTo({
						url:'/pages/home/pay?order_id='+data.order_id
					})
				})
			},
			rule(){
				uni.navigateTo({
					url:'/pages/home/rule'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-field .u-label-text {
		font-weight: 400 !important;
	}

	/deep/.u-cell_title {
		font-weight: 400 !important;
	}

	/deep/.u-cell__value {
		color: $yellow;
	}

	/deep/.u-radio__label {
		font-size: 26rpx;
	}

	.img-shop {
		image {
			width: 34rpx;
			height: 34rpx;
		}
	}

	.img-tisp {
		image {
			width: 28rpx;
			height: 28rpx;
		}
	}

	.radio {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		border: 1rpx solid #999;

		.radio-circle {
			width: 22rpx;
			height: 22rpx;
			background: $yellow;
			border-radius: 50%;
		}
	}

	.fixed-bottom {
		height: 96rpx;
	}
</style>
